<template>
	<view v-if="list.length > 0">
		<u-loading-page :loading="isLoading" loading-mode="spinner"></u-loading-page>
		<view class="card" v-for="(item, index) in list" :key="index">
			<view class="text-container">
				<view>
					<span style="font-size: 36rpx;color: #333333;font-weight: bold;">{{ item.planExaminationName
					}}</span>
				</view>
				<view>
					<span style="color: #999999;">{{ item.createTime }}</span>
				</view>
			</view>
			<view class="btton-container">
				<u-button color="linear-gradient(to right,rgb(22, 93, 255), rgb(106, 161, 255))" shape="circle"
					customStyle="width: 130rpx; height: 50rpx; line-height: 60rpx; font-size: 20rpx"
					@click="gotoStudy(item)">
					培训
				</u-button>
			</view>
		</view>
		<view>
			<u-loadmore @loadmore="loadmore" :status="status" />
		</view>
	</view>
	<view v-else>
		<u-empty mode="data">
		</u-empty>
	</view>
</template>

<script>
import { getStudentExaminationPlanList } from '@/api/train/index.js'
export default {
	data() {
		return {
			status: "loadmore",
			list: [],
			pageNum: 1,
			pageSize: 5,
			isLoading: false,

		};
	},
	mounted() {
		console.log('组件挂载')
		this.loadList();
	},
	// 新增页面级配置
	onPullDownRefresh() {
		this.handleRefresh();
	},
	methods: {
		// 新增刷新处理方法
		async handleRefresh() {
			this.pageNum = 1;
			this.list = [];
			await this.loadList();
			uni.stopPullDownRefresh();
		},
		async loadList() {
			this.isLoading = true;
			const { rows, total, code, msg } = await getStudentExaminationPlanList({ pageNum: this.pageNum, pageSize: this.pageSize });
			if (code == 200) {
				this.isLoading = false;
				// 合并新旧数据（使用扩展运算符）
				this.list = [...this.list, ...rows];
				// 根据是否还有数据更新状态
				// this.status = this.list.length >= total ? "nomore" : "loadmore";
			}
		},
		loadmore() {
			console.log('加载更多')
			// if (this.status === "nomore") return;
			this.pageNum++;
			// this.status = "loading"; // 先显示加载中状态
			this.loadList();
		},
		//去看视频
		gotoStudy(item) {
			uni.navigateTo({
				url: `/pagesA/train/studyVideo/index?id=${item.planExaminationId}`
			});
		}
	},
};
</script>

<style lang="scss">
.card {
	display: flex;
	overflow: hidden;
	width: 100%;
	height: 200rpx;
}

.btton-container {
	width: 180rpx;
	margin-top: 20rpx;
	margin-right: 20rpx;
}

.text-container {
	flex: 2;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
</style>
